<template>
    <transition name="message-box">
        <div class="message-box-error" v-mask="message" v-if="show">
            <i class="iconfont" :class="boxType"></i>
            <h3>{{title}}</h3>
            <p>{{message}}</p>
            <div class="btns">
                <span class="enter" @click="enter">确定</span>
                <span class="esc" @click="esc">取消</span>
            </div>
        </div>
    </transition>
</template>

<script>
    import 'components/mask';
    export default {
        name: 'message-box-error',
        props: {
            show: Boolean,
            message: String,
            title: String,
            type: String
        },
        methods: {
            close() {
                this.$emit('close')
            },
            esc() {
                this.$emit('close')
            },
            enter() {
                this.$emit('enter')
            }
        },
        computed: {
            boxType() {
                switch (this.type) {
                    case 'success':
                        return ''
                        break;
                    case 'error':
                        return 'icon-jinggao'
                        break;
                }
            }
        }
    }

</script>

<style lang="less">
    @import '~assets/css/function.less';
    .message-box-error {
        display: block;
        width: 338px;
        padding-bottom: 40px;
        border-radius: 5px;
        background: white;
        position: fixed; 
        top: 50%;
        left: 50%;
        margin-left: -74px;
        margin-top: -169px;
        z-index: 1000;
        .iconfont {
            display: block;
            width: 46px;
            height: 46px;
            margin: 0 auto;
            margin-top: 31px;
            font-size: 46px;
            color: #fea201;
            margin-bottom: 16px;
        }
        h3 {
            width: 100%;
            color: #4C4C4C;
            text-align: center;
            font-size: 18px;
            margin-bottom: 16px;
        }
        p {
            width: 100%;
            text-align: center;
            font-size: 16px;
            color: #333333;
        }
        .btns {
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            span {
                display: inline-block;
                padding: 10px;
                cursor: pointer;
                color: @blue;
            }
            .enter {
                margin-right: 60px;
            }
        }
    }

    .message-box-enter-active,
    .message-box-leave-active {
        transition: all .5s;
    }

    .message-box-enter,
    .message-box-leave-to {
        opacity: 0;
        transform: translateY(-20px);
    }

</style>
